<template>
  <div class="interest">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
      right-text="跳过"
      @click-right="onClickRight"
    />
    <p class="p-1">选择你感兴趣的知识</p>
    <p class="p-2">至少选择1个可随时调整</p>
    <div class="hot">
      <p>
        <b></b>
        <span class="tui">热门推荐</span>
      </p>
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item :text="item" v-for="item in list[0]" :key="item" />
      </van-grid>
    </div>
    <div class="hot">
      <p>
        <b class="b-2"></b>
        <span class="tui">IT互联网</span>
      </p>
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item :text="item" v-for="item in list[1]" :key="item" />
      </van-grid>
    </div>
    <div class="hot">
      <p>
        <b class="b-3"></b>
        <span class="tui">职场技能</span>
      </p>
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item :text="item" v-for="item in list[2]" :key="item" />
      </van-grid>
    </div>
    <div class="hot">
      <p>
        <b class="b-4"></b>
        <span class="tui">生活爱好</span>
      </p>
      <van-grid direction="horizontal" :column-num="3">
        <van-grid-item :text="item" v-for="item in list[3]" :key="item" />
      </van-grid>
    </div>
    <div class="chose" @click="onClickRight">选好了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        ["人工智能", "办公软件", "投资理财"],
        [
          "移动开发",
          "前端开发",
          "人工智能",
          "大数据",
          "测试运维",
          "信息安全",
          "户体验",
          "Python",
          "Java",
        ],
        [
          "求职应聘",
          "办公软件",
          "人工智能",
          "实用英语",
          "交互设计",
          "平面设计",
          "市场营销",
          "UI设计",
        ],
        ["摄影基础", "绘画", "投资理财", "设计软件", "人工智能", "心理学"],
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "user",
      });
    },
    onClickRight() {
      this.$router.push({
        name: "user",
      });
    },
  },
  created() {
    this.$store.commit("tabHide");
  },
};
</script>

<style lang="scss">
.interest {
  margin-bottom: 35px;
  .van-grid-item__content {
    padding: 5px 5px;
  }
  .p-1 {
    width: 288px;
    height: 38px;
    margin: 30px auto 0;
    text-align: center;
    line-height: 38px;
    font-size: 16px;
  }
  .p-2 {
    width: 288px;
    height: 38px;
    color: rgba(120, 131, 155, 1);
    font-size: 12px;
    margin: 5px auto;
    text-align: center;
    line-height: 38px;
  }
  .van-grid-item__text {
    border: 1px solid rgba(236, 238, 241, 1);
    display: inline-block;
    padding: 2px 5px;
    border-radius: 20px;
    color: rgba(153, 164, 189, 1);
    font-size: 13px;
  }

  [class*="van-hairline"]::after {
    border: 0;
  }
  .hot {
    width: 312px;
    margin: 20px auto;
    border-bottom: 1px solid rgba(236, 238, 241, 1);

    p {
      margin: 10px 0;
    }

    b,
    .b-2,
    .b-3,
    .b-4 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      background-color: red;
      margin-left: 13px;
    }
    .b-2 {
      background-color: rgba(217, 55, 195, 1);
    }
    .b-3 {
      background-color: rgba(100, 149, 203, 1);
    }
    .b-4 {
      background-color: rgba(255, 195, 0, 1);
    }
    .tui {
      color: rgba(80, 80, 80, 1);
      font-size: 15px;
      margin-left: 10px;
    }
  }
  .chose {
    width: 223px;
    height: 40px;
    left: 0;
    right: 0;
    margin: auto;
    position: fixed;
    bottom: 0;
    text-align: center;
    line-height: 40px;
    background-color: rgba(51, 177, 123, 1);
    border-radius: 22px;
    color: white;
  }
}
</style>